<template>
	<view :data-theme="theme">
		<view class="content">
			<view class="card" v-for="(item,index) in dataList" :key="index">
				<view @click="toDetails(item)">
					<view style="display: flex;padding: 20rpx; justify-content: space-between;">
						<view class="title" style="font-weight: bold;font-size: 30rpx;">
							退货退款
						</view>
						<view class="title" style="font-size: 30rpx;">
							{{refundStatus[item.refundStatus] ? refundStatus[item.refundStatus] : ''}}
						</view>
						<!-- <view class="title-c bg_color" style="color: #fff;padding: 10rpx;border-radius: 8rpx;">
							{{refundStatus[item.refundStatus] ? refundStatus[item.refundStatus] : ''}}
						</view> -->
					</view>
					<view class="column">
						<view class="title">
							退款原因:
						</view>
						<view class="title-c">
							{{item.refundReasonWap ? item.refundReasonWap : '无理由'}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							售后时间:
						</view>
						<view class="title-c">
							{{item.createTime ? item.createTime : ' '}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							售后单号:
						</view>
						<view class="title-c">
							{{item.refundOrderNo ? item.refundOrderNo : ' '}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							售后金额:
						</view>
						<view class="title-c">
							-<u--text mode="price" :text="item.refundPrice"></u--text>
						</view>
						<!-- <view>
					 		{{item.totalNum}}件
					 	</view> -->
					</view>
					<!-- <view class="column">
						<view class="title">
							订单号:
						</view>
						<view class="title-c">
							{{item.orderNo ? item.orderNo : ' '}}
						</view>
					</view> -->
					<!-- <view class="column">
						<view class="title">
							用户昵称:
						</view>
						<view class="title-c">
							{{item.userNickName ? item.userNickName : ' '}}
						</view>
					</view> -->
				</view>
				<view style="margin:15rpx 0px 10rpx 0px;border-bottom: 1px solid #ddd"></view>
				<view style="margin-top: 30rpx;margin-left: 10rpx;margin-right: 10rpx;padding-bottom: 30rpx;">
					<view style="display: flex;">
						<!-- <button v-if="item.refundStatus == 0"
							style="margin-right:10px ;line-height: 64rpx; font-weight: bold;padding: 0 20rpx;"
							class="plain_bgColor" @click="refuseRefund(item)">拒绝退款</button> -->
						<u--image :showLoading="true" :src="item.image" width="140rpx" height="140rpx"></u--image>
					</view>
				</view>
				<view class="content-footer">
					<view style="display: flex;justify-content: end;">
						<button v-if="item.refundStatus == 0"
							style="margin-right:10px ;line-height: 64rpx; font-weight: bold;padding: 0 20rpx;"
							class="plain_bgColor" @click="refuseRefund(item)">拒绝退款</button>
						<!-- :disabled="item.refundStatus == 1 || item.refundStatus == 3" -->
						<button v-if="item.refundStatus == 0"
							style="margin-right:10px ; line-height: 64rpx; font-weight: bold;padding: 0 20rpx;"
							class="plain_bgColor" @click="refundOrder(item)">立即退款</button>
						<button style="margin-right:10px ; line-height: 64rpx; font-weight: bold;padding: 0 20rpx;"
							class="plain_bgColor" @click="orderNote(item)">订单备注</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 生态弹窗组件 -->
		<view>
			<u-modal :show="showInfoModalVision" showCancelButton @confirm="showInfoModalConfirm"
				:content='showInfoModalInfo' @cancel="() => showInfoModalVision = false">
			</u-modal>
			<u-modal :show="showOrderNote" :title="showOrderNoteTitle" showCancelButton @confirm="showOrderNoteConfirm"
				@cancel="() => showOrderNote = false">
				<!-- <u-input v-model="remark"></u-input> -->
				<!-- <u--input style="line-height: 2;" v-model="remark"></u--input> -->
				<u--textarea v-model="remark" placeholder="请输入内容" ></u--textarea>
			</u-modal>
			<u-modal :show="showRefuseRefund" :title="showRefuseRefundTitle" showCancelButton
				@confirm="showRefuseRefundConfirm" @cancel="() => showRefuseRefund = false">
				<!-- <u-input
					v-model="reason"></u-input> -->
				<!-- <u--input v-model="reason"></u--input> -->
				<u--textarea v-model="reason" placeholder="请输入内容" ></u--textarea>
			</u-modal>
		</view>

		<u-empty v-if="!dataList.length" style="background-color: #fff;height: 76vh;" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {
		getListAllApi,
		refundOrderApi,
		markRefundNoteApi,
		refuseRefundOrderApi
	} from '@/api/orderMarket.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		props: {
			tab: {
				type: [Object],
				default: ''
			},
			bgColor: {
				type: String,
				default: 'bule'
			},
		},
		data() {
			return {
				theme: app.globalData.theme,
				orderParams: {
					limit: 10,
					page: 1,
					refundStatus: 9, //0待审核，1未通过，2退款中，3已退款，9全部
				},
				dataList: [],
				totalPage: 1, //总页面数量
				loadMoreStatus: 'more', // 底部状态 noMore loading
				// 的程
				refundStatus: {
					0: '待审核',
					1: '未通过',
					2: '退款中',
					3: '已退款',
				},
				// ------ 确认弹窗
				showInfoModalVision: false,
				showInfoModalInfo: '您确定要进行退款吗？',
				refundOrderNo: '', //退款单号
				//-----
				showOrderNote: false,
				showOrderNoteTitle: '请您输入备注',
				remark: '', //备注内容
				//-----
				showRefuseRefund: false,
				showRefuseRefundTitle: '请您输入拒绝原因',
				reason: '', //拒绝原因
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.orderParams.page = 1;
				this.loadMoreStatus = 'more';
				//需要初始化列表数据，根据数据类型
				this.orderParams.refundStatus = this.tab.type;

				this.getOrderList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.orderParams.page++;
				this.getOrderList(true);
			},
			toDetails(item) {
				this.$emit('toDetails', item);
			},
			// 搜索查询
			searchProduct(valueKey) {
				this.orderParams.page = 1;
				this.orderParams.orderNo = valueKey;
				this.loadMoreStatus = 'more';
				this.getOrderList();
			},
			//时间查询
			calendarProduct(dates) {
				// console.log("查询日期：", dates[0], "-", dates[dates.length - 1]);
				this.orderParams.dateLimit = dates;
				this.loadMoreStatus = 'more';
				this.getOrderList()
			},
			// --------api------获取数据
			getOrderList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.orderParams.page = 1;
					this.loadMoreStatus = 'more';
				};
				getListAllApi(this.orderParams).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.list, that.dataList);
					} else {
						that.dataList = data.list;
					}
					that.totalPage = data.totalpage;
					if (data.totalPage == this.orderParams.page || data.totalPage == 0) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
			// 订单退款
			refundOrder(e) {
				this.showInfoModalVision = true;
				this.refundOrderNo = e.refundOrderNo;
			},
			// 弹窗确认事件
			showInfoModalConfirm() {
				refundOrderApi({
					refundOrderNo: this.refundOrderNo
				}).then((data) => {
					this.orderParams.page = 1;
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 2000
					});
					this.getOrderList();
				});
				this.showInfoModalVision = false;
			},
			showOrderNoteConfirm() {
				let roderNote = {
					remark: this.remark,
					refundOrderNo: this.refundOrderNo
				};
				markRefundNoteApi(roderNote).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
					}
				})
				this.showOrderNote = false;
			},
			orderNote(e) {
				this.remark = ''; //开启前清空输入框
				this.showOrderNote = true;
				this.refundOrderNo = e.refundOrderNo;
			},
			// 拒绝退款弹窗
			refuseRefund(e) {
				this.reason = ''; //开启前清空输入框
				this.showRefuseRefund = true;
				this.refundOrderNo = e.refundOrderNo;
			},
			// 拒绝退款确认按钮
			showRefuseRefundConfirm() {
				refuseRefundOrderApi({
					reason: this.reason,
					refundOrderNo: this.refundOrderNo
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
					}
				})
				this.showRefuseRefund = false;
			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.content {
		// margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.column {
		padding: 14rpx 10rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		font-size: 26rpx;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 130rpx;
			color: #7e7e7e;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.content-footer {
		margin-top: 30rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		padding-bottom: 30rpx;
	}
</style>